<script setup lang="ts">
  import { reactive, ref, defineProps, watch } from 'vue';
  import { getName } from '@/utils/auth';
  import { Notification } from '@arco-design/web-vue';
  import {
    getTeamMemberPage,
    deleteTeamMember,
    saveOrUpdateTeamMember,
  } from '@/api/les';

  // 成员表头
  const personColumns: any[] = [
    {
      title: '序号',
      dataIndex: 'id',
      slotName: 'id',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    {
      title: '工号',
      dataIndex: 'teamMemberCode',
    },
    {
      title: '名称',
      dataIndex: 'teamMemberName',
    },
    {
      title: '职别',
      dataIndex: 'teamMemberTitle',
    },

    {
      title: '操作',
      dataIndex: 'action',
      slotName: 'action',
      align: 'center',
      fixed: 'right',
    },
  ];
  const props = defineProps<{
    teamId: any;
  }>();
  // 成员数据
  const personData = ref<any[]>([]);
  const addTeamModal = ref<boolean>(false);
  const editTeamModal = ref<boolean>(false);
  const addFormRef = ref<any>();
  const editFormRef = ref<any>();
  const createForm = reactive({
    lesTeamId: '',
    teamMemberCode: '',
    teamMemberName: '',
    teamMemberTitle: '',
    updateUser: getName(),
    createUser: getName(),
  });
  const updateForm = reactive({
    lesTeamId: '',
    lesTeamMemberId: '',
    teamMemberCode: '',
    teamMemberName: '',
    teamMemberTitle: '',
    createUser: getName(),
    updateUser: getName(),
  });
  const rules = {
    teamMemberCode: [{ required: true, message: '工号不能为空' }],
    teamMemberName: [{ required: true, message: '名称不能为空' }],
    teamMemberTitle: [{ required: true, message: '职别不能为空' }],
  };
  const total = ref<number>(0);
  const pageNum = ref<number>(1);
  const pageSize = ref<number>(10);

  // 职别
  const title = ref<string>('');
  // 名称
  const name = ref<string>('');
  // 班组成员查询
  async function handleSearch() {
    const data = await getTeamMemberPage({
      current: pageNum.value,
      size: pageSize.value,
      teamMemberName: name.value,
      teamMemberTitle: title.value,
      teamId: props.teamId,
    });
    personData.value = data.responseBody.records;
    total.value = data.responseBody.total;
  }
  function reset() {
    title.value = '';
    name.value = '';
    handleSearch();
  }
  watch(
    () => props.teamId,
    () => {
      if (props.teamId) {
        handleSearch();
      }
    }
  );
  // 新增班组成员
  function addTeam() {
    createForm.teamMemberCode = '';
    createForm.teamMemberName = '';
    createForm.teamMemberTitle = '成员';
    createForm.lesTeamId = props.teamId;
    addTeamModal.value = true;
  }

  // 保存新增班组成员
  async function handleBeforeOk(done: any) {
    const status = await addFormRef.value.validate();
    if (status) {
      done(false);
    } else {
      const data = await saveOrUpdateTeamMember(createForm);
      if (data.retCode === '200') {
        Notification.success({
          title: '成功',
          content: data.message,
          closable: true,
        });
      } else {
        Notification.error({
          title: '失败',
          content: data.message,
          closable: true,
        });
      }
      handleSearch();
      done();
    }
  }
  // 修改班组成员
  function onEdit(record: any) {
    updateForm.teamMemberCode = record.teamMemberCode;
    updateForm.teamMemberName = record.teamMemberName;
    updateForm.teamMemberTitle = record.teamMemberTitle;
    updateForm.lesTeamMemberId = record.lesTeamMemberId;
    updateForm.lesTeamId = record.lesTeamId;
    editTeamModal.value = true;
  }

  // 保存班组成员修改
  async function editOk(done: any) {
    const status = await editFormRef.value.validate();
    if (status) {
      done(false);
    } else {
      const data = await saveOrUpdateTeamMember(updateForm);
      if (data.retCode === '200') {
        Notification.success({
          title: '成功',
          content: data.message,
          closable: true,
        });
      } else {
        Notification.error({
          title: '失败',
          content: data.message,
          closable: true,
        });
      }
      handleSearch();
      done();
    }
  }

  // 删除班组成员
  async function onDel(record: any) {
    const data = await deleteTeamMember({
      lesTeamMemberId: record.lesTeamMemberId,
    });
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
    }
    handleSearch();
  }

  function change(e: any) {
    pageNum.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }
</script>

<template>
  <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
    <a-col :span="6"> <a-input v-model="title" placeholder="职别" /> </a-col>
    <a-col :span="6"> <a-input v-model="name" placeholder="名称" /> </a-col>
    <a-col :span="12">
      <div>
        <a-button type="primary" size="large" @click="handleSearch"
          >查询</a-button
        >
        <a-button class="btn-reset" size="large" @click="reset">重置</a-button>
        <a-button
          v-if="props.teamId"
          type="primary"
          class="btn-reset"
          size="large"
          @click="addTeam"
        >
          班组成员添加
        </a-button>
      </div></a-col
    >
  </a-row>

  <a-divider style="margin-top: 8px; margin-bottom: 8px" />
  <a-table
    :stripe="true"
    class="top-table"
    :columns="personColumns"
    :data="personData"
    :pagination="false"
  >
    <template #id="{ record }">{{ personData.indexOf(record) + 1 }}</template>
    <template #action="{ record }">
      <a-button type="text" class="font-color" @click="onEdit(record)"
        >修改</a-button
      >
      <a-popconfirm
        content="确定删除吗?"
        ok-text="确认"
        cancel-text="取消"
        @ok="onDel(record)"
      >
        <a-button type="text" class="font-color">删除</a-button>
      </a-popconfirm>
    </template>
  </a-table>
  <div class="page-position">
    <a-pagination
      :total="total"
      :current="pageNum"
      :page-size="pageSize"
      show-total
      show-jumper
      show-page-size
      @change="change"
      @update:pageSize="changeSize"
    />
  </div>
  <!-- 班组新增 -->
  <a-drawer
    v-model:visible="addTeamModal"
    :width="500"
    :height="340"
    title="新增班组信息"
    @cancel="() => (addTeamModal = false)"
    @before-ok="handleBeforeOk"
  >
    <a-form
      ref="addFormRef"
      :model="createForm"
      :rules="rules"
      :style="{ width: '450px' }"
    >
      <a-form-item field="teamMemberCode" label="工号">
        <a-input v-model="createForm.teamMemberCode" placeholder="请输入" />
      </a-form-item>
      <a-form-item field="teamMemberName" label="名称">
        <a-input v-model="createForm.teamMemberName" placeholder="请输入" />
      </a-form-item>
      <a-form-item field="teamMemberTitle" label="职别">
        <a-select v-model="createForm.teamMemberTitle" placeholder="请输入">
          <a-option value="成员">成员</a-option>
          <a-option value="班组长">班组长</a-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-drawer>
  <!-- 班组修改 -->
  <a-drawer
    v-model:visible="editTeamModal"
    :width="500"
    :height="340"
    title="班组信息修改"
    @cancel="() => (addTeamModal = false)"
    @before-ok="editOk"
  >
    <a-form
      ref="editFormRef"
      :model="updateForm"
      :rules="rules"
      :style="{ width: '450px' }"
    >
      <a-form-item field="teamMemberCode" label="工号">
        <a-input v-model="updateForm.teamMemberCode" placeholder="请输入" />
      </a-form-item>
      <a-form-item field="teamMemberName" label="名称">
        <a-input v-model="updateForm.teamMemberName" placeholder="请输入" />
      </a-form-item>
      <a-form-item field="teamMemberTitle" label="职别">
        <a-input v-model="updateForm.teamMemberTitle" placeholder="请输入" />
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<style scoped>
  span {
    margin-bottom: 16px;
  }
  .top-table {
    white-space: nowrap;
  }
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn-reset {
    margin-left: 10px;
  }
</style>
